<template>
    <div class="body-container">
        <el-card class="box-card" shadow="always">
            <el-descriptions title="学生信息">
                <el-descriptions-item label="学生姓名">{{studentInfo.trueName}}</el-descriptions-item>
                <el-descriptions-item label="学号">{{studentInfo.stuId}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{studentInfo.phone}}</el-descriptions-item>
                <el-descriptions-item label="身份">
                    <el-tag size="small">学生</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="联系地址">{{studentInfo.address}}</el-descriptions-item>
                <el-descriptions-item label="实名认证">
                    <el-tag type="success" v-if="isNameAuthorization">已认证成功</el-tag>
                    <el-tag type="warning" v-else>未认证成功</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-card class="box-card" shadow="always" style="margin-bottom: 20px;">
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="first">
                    <el-form :model="studentInfo" status-icon ref="ruleForm" label-width="80px" :rules="rules">
                        <el-form-item label="姓名">
                            <el-input disabled type="text" v-model="studentInfo.trueName"
                                      autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学号">
                            <el-input disabled type="text" v-model="studentInfo.stuId"
                                      autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model.number="studentInfo.age"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="gender">
                            <el-radio-group v-model="studentInfo.gender">
                                <el-radio label=true>男</el-radio>
                                <el-radio label=false>女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="phone">
                            <el-input type="text" v-model="studentInfo.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学校" prop="school">
                            <el-input v-model="studentInfo.school"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="studentInfo.email"></el-input>
                        </el-form-item>
                        <el-form-item label="联系地址" prop="address">
                            <el-input v-model="studentInfo.address"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitBaseInfoForm('ruleForm')">保存</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>

                <el-tab-pane label="实名认证" name="second">
                    <el-steps :active="active" finish-status="success">
                        <el-step title="填写身份信息"></el-step>
                        <el-step title="扫脸验证"></el-step>
                        <el-step title="实名认证成功"></el-step>
                    </el-steps>
                    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
                </el-tab-pane>

                <el-tab-pane label="密码更换" name="third">

                    <el-form :model="passwordForm" status-icon :rules="rules3" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="旧密码" prop="oldpassword">
                            <el-input type="password" v-model="passwordForm.oldpassword" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">
                            <el-input type="password" v-model="passwordForm.pass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="passwordForm.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitPasswordForm('ruleForm2')">提交</el-button>
                            <el-button @click="resetForm('ruleForm2')">重置</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
    import {request} from "../../api/request";

    export default {
        name: "StudentInfo",
        mounted() {
            this.studentInfo = this.$store.getters.getStudentInfo;
        },
        data() {
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 0 || value > 120) {
                            callback(new Error('请输入正确的年龄'));
                        } else {
                            callback();
                        }
                    }
                }, 10);
            };
            return {
                active: 0,
                isNameAuthorization: true,
                activeName: 'first',
                studentInfo: {},
                rules: {
                    age: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'},
                        {validator: checkAge, trigger: ['blur', 'change']}
                    ],
                    phone: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'},
                        {pattern: '^[1]([3-9])[0-9]{9}$', message: '请输入正确的联系电话', trigger: ['blur', 'change']}
                    ],
                    school: [
                        {required: true, message: '请输入所在学校', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                    address: [
                        {required: true, message: '请输入联系地址', trigger: 'blur'}
                    ]
                },
                rules3: {
                    oldpassword: [
                        {required: true, message: '请输入原始密码', trigger: 'blur'}
                    ],
                    pass: [
                        {required: true, message: '请输入新密码', trigger: 'blur'}
                    ],
                    checkPass: [
                        {required: true, message: '请再次输入新密码', trigger: 'blur'}
                    ],
                },
                passwordForm: {
                    oldpassword: '',
                    pass: '',
                    checkPass: ''
                }
            };
        },
        methods: {
            submitBaseInfoForm(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request({
                            method: 'post',
                            url: '/student/info/update',
                            data: {
                                userId: that.studentInfo.userId,
                                phone: that.studentInfo.phone,
                                school: that.studentInfo.school,
                                email: that.studentInfo.email,
                                address: that.studentInfo.address,
                                age: that.studentInfo.age,
                                gender: that.studentInfo.gender
                            }
                        }).then(function (data) {
                            data = data.data;
                            if (data.code === 200) {
                                that.$message.success("信息修改成功");
                                setTimeout(_ => {
                                    that.$store.commit('updateStudentInfo', that.studentInfo);
                                    window.location.reload();
                                }, 300);
                            } else {
                                that.$message.error("信息修改失败");
                            }
                        }).catch(function (err) {
                            that.$message.error("信息修改失败");
                        });
                    } else {
                        return false;
                    }
                });
            },
            submitPasswordForm(formName) {
                let that = this;
                if(this.passwordForm.pass !== this.passwordForm.checkPass) {
                    this.$message.error("两次输入的新密码不一致");
                    return false;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request({
                            method: 'post',
                            url: '/student/info/update/password',
                            params: {
                                userId: that.studentInfo.userId,
                                oldPassword: that.passwordForm.oldpassword,
                                newPassword: that.passwordForm.pass
                            }
                        }).then(function (data) {
                            data = data.data;
                            if(data.code === 200) {
                                that.$message.success(data.message);
                            } else {
                                that.$message.error(data.message);
                            }
                        }).catch(function (err) {
                            that.$message.error('密码更改失败');
                        });

                    } else {
                        return false;
                    }
                });
            },
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .box-card {
        width: 100%;
        margin-top: 25px;
    }
</style>